<script setup lang="ts">
import ChatPrompt from '~/options/ChatPrompt.vue'

const activeIndex = ref()
const showComponents = ref()

function handleSelect(key: string) {
  showComponents.value = key
}

const componentsList = ref([
  {
    label: 'AI Prompt',
    component: ChatPrompt,
  },
])

onMounted(() => {
  activeIndex.value = ChatPrompt
  showComponents.value = ChatPrompt
})
</script>

<template>
  <!-- start测试模板的 -->
  <!--  <StockXl /> -->
  <!--  end 测试模块 -->
  <div class="w-[100%] fixed left-0 top-0">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <template v-for="item in componentsList" :key="item.label">
        <el-menu-item :index="item.component">
          {{ item.label }}
        </el-menu-item>
      </template>
    </el-menu>
  </div>
  <div class="main-content">
    <component :is="showComponents" />
  </div>
</template>

<style scoped>
.main-content {
  width: 100%;
  box-sizing: border-box;
  padding: 76px 16px 16px;
}
</style>
